<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('新增菌剂')" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-projectMicrobial-add" enctype="multipart/form-data">
      <div class="form-group">
        <label class="col-sm-3 control-label">菌剂类型：</label>
        <div class="col-sm-8">
          <div class="radio-box" th:each="dict : ${@dict.getType('micro_pharm_type')}">
            <input type="radio" th:id="${dict.dictCode}" name="microbialType" th:value="${dict.dictValue}" th:checked="${dict.isDefault == 'Y' ? true : false}">
            <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">种类：</label>
        <div class="col-sm-8">
          <select name="microbialCategory" class="form-control m-b" th:with="type=${@dict.getType('pharm_type')}" required>
            <option value="">--请选择--</option>
            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
          </select>
          <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>菌剂类型选择种类“无”</span>
        </div>
      </div>
      <div class="form-group">
				<label class="col-sm-3 control-label">菌剂名称：</label>
				<div class="col-sm-8">
					<input id="microbialName" name="microbialName" class="form-control" type="text" maxlength="30" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">菌剂价格（元）：</label>
				<div class="col-sm-8">
					<input id="microbialPrice" name="microbialPrice" class="form-control" type="text" maxlength="8" required>
				</div>
			</div>
      <div class="form-group">
        <label class="col-sm-3 control-label">产品规格：</label>
        <div class="col-sm-8">
          <input name="microbialSpec" class="form-control" type="text" maxlength="100">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">产品单位：</label>
        <div class="col-sm-8">
          <select name="microbialUnit" class="form-control m-b" th:with="type=${@dict.getType('micro_unit_type')}" required>
            <option value="">--请选择--</option>
            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">产品logo图片：</label>
        <div class="col-sm-8">
          <input id="logoFile" name="logoFile" type="file" accept="image/*" required>
            <font color="red" class="pull-left mt10">
                提示：图片尺寸要求为180(宽)*120(高)！
            </font>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">产品介绍图片：</label>
        <div class="col-sm-8">
          <input id="file" name="file" type="file" accept="image/*">
            <font color="red" class="pull-left mt10">
                提示：图片尺寸要求为750(宽)！
            </font>
        </div>
      </div>
		</form>
	</div>
  <th:block th:include="include :: footer" />
	<script type="text/javascript">
		var prefix = ctx + "project/projectMicrobial";
        $(window).load(function() {
            $('#logoFile').on('change', function() {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var format = e.target.result;
                    //根据MIME判断上传的文件是不是图片类型
                    if(format.indexOf("image/")==-1){
                        $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
                        $('#logoFile').val('');
                        return;
                    }
                    var img = new Image();
                    img.src = e.target.result;
                    img.onload = function(){
                        var width = img.width;
                        var height = img.height;
                        if (width != 180 && height != 120) {
                            $.modal.alertWarning("图片尺寸错误，请上传图片尺寸为：180(宽)*120(高)。");
                            $('#logoFile').val('');
                            return;
                        }
                    };
                }
                reader.readAsDataURL(this.files[0]);
            });

            $('#file').on('change', function() {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var format = e.target.result;
                    //根据MIME判断上传的文件是不是图片类型
                    if(format.indexOf("image/")==-1){
                        $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
                        $('#file').val('');
                        return;
                    }
                    var img = new Image();
                    img.src = e.target.result;
                    img.onload = function(){
                        var width = img.width;
                        if (width != 750) {
                            $.modal.alertWarning("图片尺寸错误，请上传图片尺寸为：750(宽)。");
                            $('#file').val('');
                            return;
                        }
                    };
                }
                reader.readAsDataURL(this.files[0]);
            });
        });

		$("#form-projectMicrobial-add").validate({
			rules : {
				microbialPrice : {
					number : true
				}
			},
			focusCleanup : true
		});

		function submitHandler() {
			if ($.validate.form()) {
        var formData = new FormData($("#form-projectMicrobial-add")[0]);
        $.ajax({
          url: prefix + "/add",
          type: "post",
          data: formData,
          cache: false,
          processData: false,
          contentType: false,
          success: function(result) {
            $.operate.saveSuccess(result);
          }
        });
			}
		}
	</script>
</body>
</html>
